<template>
  <div
    class="CardFlip"
    :class="{ flip: isFlip }"
    :style="{ height, width }"
    @mouseenter="flip"
    @mouseleave="flip"
    @click="flip">
    <div class="front">
      <slot name="front"></slot>
    </div>
    <div class="back">
      <slot name="back"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    height: String,
    width: String,
    eventType: {
      type: String,
      default: 'hover' // click || hover
    }
  },
  data() {
    return {
      isFlip: false,
    }
  },
  methods: {
    flip() {
      console.log(event)
      let eventMap = {
        'click': ['click'],
        'hover': [
          'mouseleave',
          'mouseenter'
        ]
      }
      if (eventMap[this.eventType].includes(event.type)) {
        this.isFlip = !this.isFlip
      }
    },
  },
}
</script>
<style lang="less" scoped>
.CardFlip > {
  cursor: pointer;
  height: 100%;
  width: 100%;
  perspective: 1000px;
  position: relative;
  .front, .back {
    // filter: drop-shadow(0px 0px 3px black);
    box-shadow: 0px 2px 4px 0px black;
    position: absolute;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    backface-visibility: hidden; /* 隐藏背面或正面的背面 */  
    transition: transform 0.6s ease-in-out; /* 平滑翻转效果 */  
  }
  .front {
    z-index: 2;
    transform: rotateY(0deg);
    background-color: red;
  }
  .back {
    background-color: blue;
    transform: rotateY(180deg);
  }
  &.flip > {
    .front {
      transform: rotateY(180deg);
    }
    .back {
      transform: rotateY(360deg);
    }
  }
}
</style>